<template>
  <div>
    <!-- 头部 -->
    <nav-bar class="nav-bar">
      <p slot="center">我的</p>
    </nav-bar>

    <!-- 登录注册 -->
    <login />

    <!-- 账号信息 -->
    <info />

    <!-- 我的订单 -->
    <profile-item class="profile-item">
      <i slot="order" class="iconfont icon-dd"></i>
      <p slot="serve">我的订单</p>
    </profile-item>

    <!-- 服务中心 -->
    <profile-item class="profile-item">
      <i slot="order" class="iconfont icon-fuwuzhongxin"></i>
      <p slot="serve">服务中心</p>
    </profile-item>

    <!-- 登录 -->
    <div class="logout">登录</div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import Login from "./childComps/Login.vue";
import Info from "./childComps/Info.vue";
import ProfileItem from "./childComps/ProfileItem.vue";
export default {
  components: {
    NavBar,
    Login,
    Info,
    ProfileItem,
  },
  name: "Profile",
};
</script>
<style lang="less" scoped>
.nav-bar {
  background: var(--color-green);
  color: white;
  font-size: 20px;
}
.profile-item {
  i {
    color: var(--color-green);
    font-size: 25px;
    margin-right: 10px;
  }
}

.logout {
  background: var(--color-green);
  border-radius: 3%;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
}
</style>